<template>
  <div>
    <template v-for="(item, index) in menuList">
      <div style="text-align: center;" :key="index">
        <Dropdown transfer v-if="item.children.length !== 1" placement="right-start" :key="index"
                  @on-click="changeMenu">
          <Button style="width: 70px;margin-left: -5px;padding:10px 0;" type="text">
            <Icon :size="20" :color="iconColor" :type="item.icon"></Icon>
          </Button>
          <DropdownMenu style="width: 200px;" slot="list">
            <template v-for="(child, i) in item.children">
              <DropdownItem :name="child.name" :key="i">
                <Icon :type="child.icon"></Icon>
                <span style="padding-left:10px;">{{ itemTitle(child) }}</span></DropdownItem>
            </template>
          </DropdownMenu>
        </Dropdown>
        <Dropdown transfer v-else placement="right-start" :key="index" @on-click="changeMenu">
          <Button @click="changeMenu(item.children[0].name)" style="width: 70px;margin-left: -5px;padding:10px 0;"
                  type="text">
            <Icon :size="20" :color="iconColor" :type="item.icon"></Icon>
          </Button>
          <DropdownMenu style="width: 200px;" slot="list">
            <DropdownItem :name="item.children[0].name" :key="'d' + index">
              <Icon :type="item.icon"></Icon>
              <span style="padding-left:10px;">{{ itemTitle(item.children[0]) }}</span></DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
    </template>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    name: 'sidebarMenuShrink',
    props: {
      menuList: {
        type: Array
      },
      iconColor: {
        type: String,
        default: 'white'
      }
    },
    data () {
      return {}
    },
    computed: {
      ...mapState(['openedSubmenuArr']),
    },
    methods: {
      changeMenu (active) {
        this.$router.push({
          name: active
        })
      },
      itemTitle (item) {
        if (typeof item.meta.title === 'object') {
          return this.$t(item.meta.title.i18n)
        } else {
          return item.meta.title
        }
      }, updateSubArr () {
        let target = ''
        this.menuList.map(item => {
          item.children.map(child => {
            if (child.name === this.$route.name) {
              target = item.name
            }
          })
        })
        this.$store.commit('updateOpenedSubmenuArr', [target])
      }
    },
    watch: {

      '$route.name' () {
        this.updateSubArr()
      },
      menuList () {
        this.updateSubArr()
      }
    }, created () {
    }
  }
</script>
<style scoped lang="less">
  /deep/ .ivu-btn-text:hover {
    background: none;
  }
</style>
